CSS (Cascading Style Sheets) হলো একটি স্টাইলিং ভাষা, যা HTML উপাদানগুলোর ডিজাইন ও বিন্যাস নিয়ন্ত্রণ করে। এটি ওয়েবপেজের লেআউট, রঙ, ফন্ট এবং অন্যান্য ভিজ্যুয়াল উপাদান নিয়ন্ত্রণে সাহায্য করে।
CSS এর সিনট্যাক্স
CSS এর একটি স্টাইল রুল তিনটি প্রধান অংশ নিয়ে গঠিত:
- সিলেক্টর (Selector): কোন HTML এলিমেন্টে স্টাইল প্রয়োগ করা হবে তা চিহ্নিত করে।
- প্রোপার্টি (Property): কোন বৈশিষ্ট্য পরিবর্তন করা হবে তা নির্ধারণ করে।
- ভ্যালু (Value): প্রোপার্টির জন্য নির্দিষ্ট মান প্রদান করে।
সিনট্যাক্স উদাহরণ:
selector {
property: value;
}
প্রকৃত উদাহরণ:
p {
color: blue;
font-size: 16px;
}
- এখানে
pহলো সিলেক্টর, যা সমস্ত<p>ট্যাগে প্রভাব ফেলবে। colorএবংfont-sizeহলো প্রোপার্টি।blueএবং16pxহলো ভ্যালু।
CSS সিলেক্টরস
CSS সিলেক্টরস ব্যবহার করা হয় নির্দিষ্ট HTML এলিমেন্ট নির্বাচন করার জন্য, যাতে তাদের স্টাইল প্রয়োগ করা যায়। নিচে কয়েকটি গুরুত্বপূর্ণ সিলেক্টরের তালিকা দেওয়া হলো:
1. ইলিমেন্ট সিলেক্টর (Element Selector)
একটি নির্দিষ্ট HTML ইলিমেন্ট নির্বাচন করে।
উদাহরণ:
h1 {
color: red;
}
এটি সমস্ত <h1> ট্যাগের রং লাল করে দেবে।
2. ক্লাস সিলেক্টর (Class Selector)
একটি নির্দিষ্ট ক্লাসের এলিমেন্ট নির্বাচন করে।
উদাহরণ:
.my-class {
color: green;
font-size: 20px;
}
এটি class="my-class" যুক্ত সমস্ত এলিমেন্টে প্রভাব ফেলবে।
HTML উদাহরণ:
<p class="my-class">This is a paragraph.</p>
3. আইডি সিলেক্টর (ID Selector)
নির্দিষ্ট একটি ID যুক্ত এলিমেন্ট নির্বাচন করে।
উদাহরণ:
#my-id {
background-color: yellow;
}
এটি id="my-id" যুক্ত এলিমেন্টের ব্যাকগ্রাউন্ড হলুদ করে দেবে।
HTML উদাহরণ:
<div id="my-id">This is a division.</div>
4. গ্রুপ সিলেক্টর (Group Selector)
একাধিক এলিমেন্ট একসঙ্গে নির্বাচন করতে ব্যবহৃত হয়।
উদাহরণ:
h1, h2, p {
color: blue;
}
এটি সমস্ত <h1>, <h2>, এবং <p> ট্যাগে একই স্টাইল প্রয়োগ করবে।
5. ডিসেন্ডেন্ট সিলেক্টর (Descendant Selector)
একটি ইলিমেন্টের ভিতরের চাইল্ড এলিমেন্ট নির্বাচন করতে ব্যবহার করা হয়।
উদাহরণ:
div p {
color: orange;
}
এটি সমস্ত <p> ট্যাগকে নির্বাচন করবে, যা <div> ট্যাগের মধ্যে রয়েছে।
HTML উদাহরণ:
<div>
<p>This is inside a div.</p>
</div>
6. পসেভো-ক্লাস সিলেক্টর (Pseudo-Class Selector)
ইলিমেন্টের একটি নির্দিষ্ট অবস্থায় স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।
উদাহরণ:
a:hover {
color: red;
}
এটি লিংকে হোভার করার সময় রঙ লাল করে দেবে।
HTML উদাহরণ:
<a href="#">Hover over me</a>
CSS সিনট্যাক্সের চেকলিস্ট
- সিলেক্টর: নির্দিষ্ট HTML এলিমেন্ট নির্বাচন করা।
- কুঁচি
{}: প্রোপার্টি এবং ভ্যালু আবদ্ধ করার জন্য ব্যবহৃত। - প্রোপার্টি: কোন বৈশিষ্ট্য পরিবর্তন হবে।
- কলন
:: প্রোপার্টি এবং ভ্যালুর মধ্যে ব্যবধান। - সেমিকোলন
;: একাধিক প্রোপার্টির মধ্যে আলাদা করার জন্য।
সারসংক্ষেপ
CSS সিনট্যাক্স হলো একটি গঠনমূলক নিয়ম যার মাধ্যমে HTML ইলিমেন্টে স্টাইল প্রয়োগ করা হয়। সিলেক্টর ব্যবহার করে এলিমেন্ট চিহ্নিত করা হয় এবং প্রোপার্টি ও ভ্যালু এর মাধ্যমে স্টাইল পরিবর্তন করা হয়। বিভিন্ন ধরনের সিলেক্টর যেমন ইলিমেন্ট, ক্লাস, আইডি এবং পসেভো-ক্লাস সিলেক্টর ওয়েবপেজকে আরও ডাইনামিক ও আকর্ষণীয় করতে সাহায্য করে।
Read more
